<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>{{ username }}</h4>
    <h4>{{ passwd }}</h4>
    <!-- v-model 在html标签上 -->
    <!-- <input type="text" v-model="username"> -->
    <!-- 等价于 -->
    <!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value"> -->

    <!-- v-model 在组件标签上 -->
    <!-- <AtguiguInput v-model="username" /> -->
    <!-- 等价于 -->
    <!-- <AtguiguInput :modelValue="username" @update:modelValue="username=$event"/> -->

    <!-- 修改modelValuem默认名称（v-model） -->
    <AtguiguInput v-model:user="username" v-model:mima="passwd" />
    <!-- 上面的代码本质就是改为 <AtguiguInput :user="username" @update:user="username=$event"   :mima="passwd" @update:mima="passwd=$event"/> -->

  </div>
</template>
<!-- 安装 vue 路由模块  npm install vue-router -->

<!-- npm i vite-plugin-vue-setup-extend -D -->
<script setup lang="ts" name="Father">
import { ref } from "vue"
import AtguiguInput from "./AtguiguInput.vue"
// 数据
let username = ref('zhansgan')
let passwd = ref("123")
</script>

<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>
